import * as React from 'react';
import { Table, Divider } from 'antd';

import IForm from '../components/IForm';
import IButton from '../components/IButton';

import http from '../utils/http';
import validation from '../utils/validation';



interface State {
    data: any[];
    columns: any[];
    tableX: number;
    loading: boolean;
    query: any;
    total: number;
}

class ITable extends React.Component<{
    form?: any,
    url: string,
    columns: any[],
    rowKey: string,
    filter: any[],
    filterData: any,
    ITButton?: React.FC,
}, {}> {

    state: State = {
        loading: false,
        data: [],
        query: {
            page: 0,
            size: 10,
        },
        total: 0,
        tableX: 1800,
        columns: [],
    };

    componentDidMount() {
        this.getData();
    }

    columnsFilter() {
        const width = 120;
        this.state.tableX = 0;
        this.state.columns = [];
        for (let o in this.props.columns) {
            const item = this.props.columns[o];
            item.width = item.width || width;
            this.state.tableX += item.width;
            this.state.columns.push(item);
        }
    }

    public render() {
        const { filterData, filter, rowKey, ITButton } = this.props;
        return (
            < div style={{
                maxWidth: `${this.state.tableX}px`,
            }}>
                {/* filter */}
                <IForm
                    {...this.props}
                    data={filterData}
                    layout="inline"
                    items={filter} />
                <div className="flex" style={{
                    marginTop: 10
                }}>
                    <IButton name="筛选" type="primary" onClick={this.filter.bind(this)} />
                    <Divider type="vertical" />
                    <IButton name="重置" onClick={this.resetFields.bind(this)} />
                    <Divider type="vertical" />
                    <ITButton />
                </div>
                <Divider />
                {/* 表格 */}
                <Table
                    columns={this.state.columns}
                    pagination={{
                        total: this.state.total,
                        onChange: this.onPageChange.bind(this),
                        current: this.state.query.page + 1,
                    }}
                    loading={this.state.loading}
                    dataSource={this.state.data}
                    scroll={{ x: this.state.tableX }}
                    rowKey={(record: any) => {
                        return record[rowKey]
                    }}
                />
            </div>
        );
    }

    //获取列表数据
    getData = async () => {
        this.setState({
            loading: true,
        });
        const query = {
            ...this.props.filterData,
            ...this.state.query,
        }
        const { data } = await http.get(this.props.url!, {
            params: query
        });
        await new Promise((resolve) => setTimeout(resolve, 1000));
        this.columnsFilter();
        this.state.data = data.data.content;
        this.state.total = data.data.totalElement;
        this.state.loading = false;
        this.setState(this.state);
    }

    onPageChange(page: any) {
        this.state.query.page = page - 1;
        this.getData();
    }
    //筛选
    async filter() {
        const value = await validation.validateFields(this.props.form);
        this.state.query.page = 0;
        this.state.query = {
            ...this.state.query,
            ...value,
        };
        this.getData();
    };
    // 表单重置
    async resetFields() {
        const { form, filterData } = this.props;
        form.resetFields();
        form.resetFields(filterData);
        this.state.query.page = 0;
        this.state.query = {
            ...this.state.query,
            ...filterData,
        };
        this.getData();
    }
}




export default ITable;